window.addEventListener("load", function () {
  var previewimg = document.querySelector(".preview_t");
  var mask = document.querySelector(".mask");
  var big = document.querySelector(".big");
  previewimg.addEventListener("mouseover", function () {
    mask.style.display = "block";
    big.style.display = "block";
  });
  previewimg.addEventListener("mouseout", function () {
    mask.style.display = "none";
    big.style.display = "none";
  });
  previewimg.addEventListener("mousemove", function (e) {
    var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
    var y = e.pageY - this.offsetTop - mask.offsetHeight / 2;
    // 遮罩层 最大移动距离=盒子的宽度-遮罩层的宽度
    var maskmaxX = previewimg.offsetWidth - mask.offsetWidth;
    var maskmaxY = previewimg.offsetHeight - mask.offsetHeight;
    if (x < 0) {
      x = 0;
    } else if (x > maskmaxX) {
      x = maskmaxX;
    }
    if (y < 0) {
      y = 0;
    } else if (y > maskmaxY) {
      y = maskmaxY;
    }
    mask.style.left = x + "px";
    mask.style.top = y + "px";
    var bigimg = document.querySelector(".bigImg");
    var maxbigx = bigimg.offsetWidth - big.offsetWidth;
    var maxbigy = bigimg.offsetHeight - big.offsetHeight;
    bigimg.style.left = -(x * maxbigx) / maskmaxX + "px";
    bigimg.style.top = -(y * maxbigy) / maskmaxY + "px";
  });
});
